<template>
    
    <div class="customer-main">

      <Balance
         ref="balance"
        :showTitle="false"
        :showColumn="false"
        :show-date="false"
        :search-placeholder="distinguish.placeholder"
        :title="distinguish.title"
      >
      <template #title>
          <div class="select">
          <Select :options="[
            {label:`商品`,value:0},
            {label:`厂家`,value:1},
          ]"
           :reduce="(item:any)=>item.value"
          v-model:value="selValue"
          @change="selectChange"
          />
         </div>
      </template>
      </Balance>
  
      <div class="content">
            <router-view></router-view>
      </div>
    </div>
  </template>
  <script setup lang="ts" name="">
  import { ref,computed,watch } from "vue";
  import Balance from "@/components/Balance/index.vue";
  import {useRoute} from "vue-router";
  import Select from "@/components/Select/index.vue";
  import {useRouter} from "vue-router";
 
  interface Distinguish{
         title:string;
         placeholder:string;

  }


  const router = useRouter();
  const balance =  ref<InstanceType<typeof Balance>>();
  const route = useRoute();
  
  const selValue = ref<number>(0);

  const distinguish = computed(():Distinguish=>{
      switch(route.path){
        default:  
        case '/account/foot/goods/index':
        selValue.value = 0;
        return {
            title:'商品',
            placeholder:'商品搜索'
        }

        case '/account/foot/factory/index':
        selValue.value = 1;

        return {
            title:'厂家',
            placeholder:'工厂搜索'
        }
      }   
  })

  watch(()=>route.path,()=>{  //重置搜索
       balance.value?.initSearchText("")
  })

  const selectChange = (value:any)=>{
        if(value === 0){
            router.push(`/account/foot/goods/index`)
        }else if(value === 1){
            router.push(`/account/foot/factory/index`)
        }
  }

 
  
  
  </script>
  <style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
    @import "./pc.scss";
  }
  </style>
  